<template>
	<view class="content">
		<!-- 搜索栏 -->
		<view class="search">
			<input type="text" inputmode="search" v-model="number" @confirm="search" placeholder="请输入快递单号">
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="item,index in swiperPics" @tap="toDetail(item.id)">
				<view class="swiper-item">
					<image :src="item.imgUrl" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 推荐物流公司 -->
		<view class="h1">
			物流公司推荐
		</view>
		<view class="recommend">
			<view class="item" v-for="item,index in recommendList" @tap="toDetail(item.id)">
				<image :src="item.imgUrl"></image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
		<view class="h1">
			其他物流公司
		</view>
		<view class="other">
			<view class="sort">
				<radio-group name="" @change="chgSort">
					<label>
						<radio value="az" checked="true" /><text>A-Z排序</text>
					</label>
					<label>
						<radio value="za" /><text>Z-A排序</text>
					</label>
				</radio-group>
			</view>
			<view class="other-list">
				<view class="item" v-for="item,index in otherList" @tap="toDetail(item.id)">{{item.name}}</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	 

	onLoad(() => {
		getSwiper()
		getExpress()
	})

 

	const number = ref("ST0000001")
	// 搜索快递单号
	function search() {
		uni.showToast({
			title: number.value
		})
		uni.navigateTo({
			url:"/pages/expressInfo/expressInfo?id="+number.value
		})
	}
	const swiperPics = ref([])
	async function getSwiper() {
		let res = await uni.$get("/prod-api/api/logistics-inquiry/ad-banner/list")
		if (res.code == 200) {
			swiperPics.value = res.data.map(item => {
				item.imgUrl = uni.$base_url + item.imgUrl
				return item
			})
		}
		// console.log(swiperPics.value);
	}
	// 全部快递公司
	const expressList = ref([])
	// 推荐快递公司(前12家)
	const recommendList = ref([])
	// 其他快递公司(除了推荐的)
	const otherList = ref([])
	async function getExpress() {
		let res = await uni.$get("/prod-api/api/logistics-inquiry/logistics_company/list")
		res.data = res.data.map(item => {
			item.imgUrl = uni.$base_url + item.imgUrl
			return item
		})
		// 全部物流公司
		expressList.value = res.data
		// 推荐物流(前12个)
		recommendList.value = res.data.slice(0, 12)
		// 其他物流公司
		otherList.value = res.data.slice(13)
		// 排序
		sortExpress("az")

	}
    
	// 快递公司排序
	function sortExpress(order) {
		let x = order == "az" ? 1 : -1
		otherList.value.sort((a, b) => {
			if (a.name > b.name) {
				return 1*x
			} else {
				return -1*x
			}
		})
	}
	// 排序单选按钮
	function chgSort(e)
	{
		let v=e.detail.value;
		sortExpress(v)
	}
	
	function toDetail(id)
	{
		uni.navigateTo({
			url:"/pages/expressDetail/expressDetail?id="+id
		})
	}
</script>

<style lang="scss">
	.content {
		.search {
			input {
				border: 1px solid #ccc;
				margin: 10px;
				height: 50rpx;
				font-size: 28rpx;
				border-radius: 5rpx;
			}
		}

		swiper {
			height: 200px;

			image {
				width: 100%;
			}
		}

		.recommend {
			display: grid;
			grid-template-columns: repeat(4, auto);
			grid-template-rows: repeat(3, auto);
			justify-content: space-around;

			.item {
				// border:1px solid red;
				font-size: 20rpx;
				margin: 5px 0;
				text-align: center;
				width: 150rpx;
				image {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}

		.other {
			.sort {
				margin: 5px;

				radio {
					margin-left: 10px;
				}
			}

			.other-list {
				.item {
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1px solid #ccc;
					padding-left: 5px;
				}
			}
		}
	}
</style>